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1.  Introduction 


Modern  military  operations  use  information  from  a  large  number  of  sources  resulting  in  potential 
data  overload.  To  process  these  data,  it  is  necessary  to  rank  the  data  in  a  manner  such  that  the 
most  valuable  information  can  be  analyzed  first.  This  ranking  metric  is  termed  the  value  of 
information  (Vol)  and  its  calculation  is  a  current  area  of  research  within  the  US  Army  Research 
Laboratory  (ARL).  Researchers  at  ARL  have  designed  and  experimented  with  a  fuzzy  associate 
memory  (FAM)  approach  to  calculating  Vol.1  They  identified  the  need  to  validate  the  system 
with  a  statistically  relevant  experiment  to  compare  the  ranking  of  information  by  subject  matter 
experts  (SMEs)  against  the  FAM  prototype.  This  report  discusses  a  web-based  tool  designed  for 
collecting  rank  data  from  SME  users  that  can  be  used  in  future  statistical  analysis.  The  following 
sections  will  discuss  the  use  and  development  of  the  Vol  web  application. 


2.  Value  of  Information  Web  Application 


The  goal  of  the  Vol  web  application  is  to  present  an  SME  with  several  scenarios,  represented  by 
a  hand  of  cards  representing  data  of  unranked  value.  The  web  application  will  record  the  order 
the  SME  ranks  the  cards  and  how  long  the  process  takes  to  complete.  These  data  will  be  used  by 
ARL  researchers  to  refine  their  understanding  of  Vol  attributes  (source  reliable,  information 
content,  and  latency). 

The  Vol  web  application  emulates  many  features  of  a  previously  created  tool  developed  in 
Visual  Basic  by  Dr  Timothy  Hanratty.  The  original  tool  required  an  executable  to  be  deployed  on 
a  computer  running  a  compatible  version  of  the  Windows  operating  system.  This  limited  the 
amount  of  users  able  to  access  the  tool.  As  a  result,  the  Vol  web  application  was  built  to  allow 
the  tool  to  be  accessed  from  the  Internet  via  a  web  browser.  The  following  sections  describe  the 
web  application’s  user  interface. 

2.1  Demographics 

The  initial  page  that  the  user  encounters  when  accessing  the  Vol  web  application  is 
Demographics  (Fig.  1).  On  this  page,  the  user  can  provide  optional  information  that  is  recorded 
with  their  results.  The  user  can  fill  in  all,  some,  or  none  of  the  information  and  then  click  the 
Submit  Demographics  button  to  continue  to  the  card-ranking  sessions. 
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Demographics 

Name: 

MOS: 

Years  of  Service: 

Number  of  Deployments: 

Email: 

Submit  Demographics 


Fig.  1  Demographics  page 

2.2  Card-Ranking  Session 

On  the  Card-Ranking  Session  page,  the  SME  uses  personal  judgment  to  rank  a  series  of  cards, 
each  card  representing  a  single  piece  of  information.  The  SME  ranks  each  card  based  upon  3 
attributes:  source  reliable,  information  content,  and  latency.  The  cards  are  divided  into  4  decks: 
training,  tactical,  strategic,  and  operational.  Each  deck,  other  than  training,  consists  of  40  hands 
of  5  or  7  cards.  The  training  deck  has  3  hands  as  its  only  use  is  to  familiarize  the  user  with  the 
system.  During  the  sessions,  the  web  application  records  the  rank  the  user  chooses  for  each  hand 
and  the  amount  of  time  taken  to  perform  the  ranking.  These  data  will  be  used  for  future  statistical 
analysis  that  is  not  discussed  in  this  report. 

The  4  decks  are  accessed  in  the  order  training,  tactical,  strategic,  and  operational.  When  the  user 
is  ready  to  view  the  first  hand  in  a  deck,  the  user  presses  the  Begin  $  Session  button,  where  $ 
stands  for  the  name  of  the  next  deck  to  be  played.  For  example,  the  button  initially  reads  Begin 
Training  Session,  since  that  is  the  first  deck  a  user  plays.  Once  a  hand  is  dealt,  this  button  is 
grayed  out  until  all  the  hands  in  the  deck  are  finished.  The  red  text  at  the  top  of  the  page  always 
informs  the  user  which  deck  they  are  currently  playing.  Figure  2  displays  the  session  page  at  the 
point  when  a  user  is  dealt  the  first  hand  from  the  training  deck. 
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Instructions:  Please  rank  the 
Information  Cards  in  the  Left 
Column  into  the  Spaces  in  the 
Right  Column  by  dragging  and 
dropping  the  Cards  into  the 
appropriate  slot. 


Begin  Training  Session 


Enter  Scores 


Exit 


Count  2 


Fig.  2  Beginning  the  training  session 

To  play  the  hand,  the  user  considers  the  attributes  on  each  card  and  then  drags  and  drops  the 
cards  from  the  Given  Data  Set  column  to  the  Ranked  Data  Set  column  to  arrange  the  cards  from 
highest  to  lowest  Vol  (Fig.  3).  During  this  ranking  process,  the  user  may  return  all  the  cards  to 
their  original  state  in  the  Given  Data  Set  column  by  pressing  the  Reset  button.  This  allows  the 
user  to  restart  the  ranking  process  but  does  not  restart  the  timer  that  is  recording  how  long  it 
takes  the  user  to  evaluate  the  hand.  When  the  user  is  satisfied  with  the  ranking  of  the  hand,  the 
user  presses  the  Enter  Scores  button.  This  action  finishes  the  data  collection  on  the  current  hand 
and  deals  a  new  hand  (unless  the  deck  is  empty).  Consequently,  the  Count  box  will  increment  by 
one  to  indicate  the  current  hand  in  play.  If  the  deck  is  empty,  the  web  application  sets  up  the  next 
deck  for  the  user  or  sends  the  user  to  the  Results  page  if  all  decks  have  been  played.  The  user  can 
also  exit  to  the  Results  page  at  anytime  by  pressing  the  Exit  button. 
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Fig.  3  Training  session  in  progress 

2.3  Results 

The  Results  page  shows  the  user  the  session  data  (Fig.  4).  It  includes  the  deck,  the  original  and 
ranked  card  order  for  each  hand,  and  the  amount  of  time,  rounded  to  the  nearest  second,  that  it 
took  to  rank  the  hand.  From  this  page,  the  user  may  also  review  and  update  their  demographic 
information  by  pressing  the  Edit  Demographics  button.  Finally,  the  user  may  send  the  data  to 
the  researchers  by  pressing  the  Submit  Results  button.  The  user  receives  a  confirmation  that  the 
submittal  was  successful  or  not  successful.  This  ends  the  users’  interaction  with  the  web 
application. 
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Results 


Data; 


Training  Session 
Original  Card  Set 
Ranked  Card  Set  : 
Original  Card  Set 
Ranked  Card  Set  : 
Original  Card  Set 
Ranked  Card  Set  : 


:  22  45  66  1  75  15  33 

22  45  66  1  75  15  33  number  of  sec  19 

:  15  27  33  44  39 

33  27  15  44  39  number  of  sec  119 

:  15  16  17  18  19  20  21 

15  16  17  18  20  19  21  number  of  3ec  9 


Edit  Demographics 


Submit  Results 


Fig.  4  Results  page 


3.  Software  Development 


The  Vol  web  application  was  designed  and  written  by  ARL.  The  pages  viewed  by  the  client,  and 
discussed  in  the  previous  sections,  were  developed  using  HTML  5  and  JavaScript  (see  the 
Appendix  for  source  code).  The  server  side  script  for  processing  the  submitted  results  was 
written  using  PHP:  Hypertext  Preprocessor  (PHP).  The  client  side  of  the  application  was  tested 
on  ARL  standard  computers  and  functioned  properly  only  when  using  the  Firefox  web  browser 
on  those  computers  (Internet  Explorer  was  not  viable  due  to  unchangeable  user  settings).  During 
testing,  the  web  application  was  hosted  successfully  on  the  Tactical  Information  Fusion 
Integrated  Digital  Virtual  Research  Network  enclave  using  both  Apache  httpd  and  Microsoft  IIS 
web  server  software. 
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4.  Conclusions 


The  development  of  the  Vol  web  tool  delivers  an  Internet-accessible  web  page  with  the  ability  to 
collect  data  for  the  statistical  refinement  of  the  Vol  parameters,  which  may  be  detailed  in  future 
reports.  The  final  step  in  deployment  is  to  identify  a  host  server  for  the  web  page  that  is 
reachable  by  relevant  SMEs.  Furthermore,  the  server  side  data  processing  should  be  modified  to 
adapt  to  data  collection  requirements.  The  current  solution  stores  the  results  in  text  files  because 
of  the  small  number  of  users.  Interaction  with  a  database  may  be  required  if  usage  ever  increases 
significantly. 
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Appendix.  Value  of  Information  Source  Code 


This  appendix  appears  in  its  original  form,  without  editorial  change. 
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<!DOCTYPE  html  PUBLIC  "-/AV3C//DTD  XHTML  1.1//EN" 
"http://www.w3.org/TR/xhtmlll/DTD/xhtmllLdtd"> 

<html  xmlns='http://www. w3.org/1999/xhtml’> 

<head  > 

<style> 

#divl,  #div2,  #div3,  #div4,  #div5,  #div6,  #div7 
{width:338px;  height:86px;margin:10px;border:2px  inset  #aaaaaa;} 
#div8,  #div9,  #divlO,  #divl  1,  #divl2,  #divl3,  #divl4 
{width:338px;  height:86px;  margin:  10px;border:2px  solid  #aaaaaa;} 
</style> 


<meta  http-equiv='Content-Type'  content='text/html;  charset=utf-8'/> 

<title  >VoI</title> 

<script  type="text/javascript"> 
var  deckl  =  new  Array/); 
var  deck2  =  new  Array (); 
var  deck3  =  new  Array (); 
var  deck4  =  new  Array/); 
var  results  =  new  Array/); 
var  resultslndex  =  0; 

var  deckNames  =  ["Training  Session", "Tactical  Session", "Strategic  Session", "Operational  Session"] 

deckl  [0]  =  [22,45,66,1,75,15,33]; 
deckl  [1]  =  [15,27,33,44,39]; 
deckl  [2]  =  [15,16,17,18,19,20,21]; 

deck2[0]  =  [23,69,34,60,75]; 
deck2[l]  =  [22,45,66,42,26,58,70]; 
deck2[2]  =  [48,14,3,4,49,70,72]; 
deck2[3|  =  [51,62,19,75,18]; 
deck2[4]  =  [75,8,60,41,68,14,51]; 
deck2[5|  =  [53,72,17,33,38,36,26]; 
deck2[6|  =  [5,31,36,16,34]; 
deck2[7]  =  [74,65,54,2,35,37,66]; 
deck2[8|  =  [62,75,19,18,51]; 
deck2[9|  =  [63,52,40,12,43]; 
deck2[10]  =  [46,58,32,3,68,23,63]; 
deck2[l  1]  =  [72,36,26,17,38,53,33]; 
deck2[12]  =  [58,10,27,13,73,66,12]; 
deck2[13]  =  [5,11,30,8,69]; 
deck2[14]  =  [24,66,16,75,13]; 
deck2[15]  =  [52,34,47,75,35,63,20]; 
deck2[16]  =  [23,3,68,32,63,46,58]; 
deck2[17]  =  [36,75,32,41,35]; 
deck2[18]  =  [12,43,63,52,40]; 
deck2[19]  =  [4,48,64,6,31]; 
deck2[20]  =  [51,7,28,57,66]; 
deck2[21]  =  [29,72,18,27,54,23,17]; 
deck2[22]  =  [41,51,68,60,8,14,75]; 
deck2[23]  =  [13,18,29,66,2]; 
deck2[24]  =  [51,7,57,66,28]; 
deck2[25]  =  [72,23,17,27,54,29,18]; 
deck2[26]  =  [48,70,72,4,3,49,14]; 
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deck2[27]  =  [11,5,69,8,30]; 
deck2[28]  =  [75,35,36,41,32]; 
deck2[29]  =  [52,61,23,13,26,33,28]; 
deck2[30]  =  [26,22,42,70,58,45,66]; 
deck2[31  ]  =  [48,6,31,4,64]; 
deck2[32]  =  [23,34,75,60,69]; 
deck2[33]  =  [66,29,18,13,2]; 
deck2[34]  =  [24,75,13,66,16]; 
deck2[35]  =  [73,27,66,58,10,13,12]; 
deck2[36]  =  [34,52,75,63,35,47,20]; 
deck2[37]  =  [37,65,66,35,2,74,54]; 
deck2[38]  =  [52,28,23,26,33,13,61]; 
deck2[39]  =  [34,5,36,31,16]; 

deck3  [0]  =  [18,5,54,24,70,25,38]; 
deck3  [1]  =  [15,53,17,46,59]; 
deck3  [2]  =  [24,57,58,9,70,2,54]; 
deck3  [3]  =  [52,1,6,71,8,25,62]; 
deck3  [4]  =  [74,32,36,75,65,62,15]; 
deck3  [5]  =  [29,32,42,68,38,40,33]; 
deck3  [6]  =  [70,48,72,56,27]; 
deck3  [7]  =  [14,36,66,28,51,2,30]; 
deck3  [8]  =  [71,67,62,58,7,20,11]; 
deck3  [9]  =  [71,73,25,16,49]; 
deck3[10]  =  [54,9,2,70,24,58,57]; 
deck3[ll]  =  [41,14,56,4,35]; 
deck3[12]  =  [9,13,43,5,36]; 
deck3[13]  =  [75,74,32,62,36,65,15]; 
deck3[14]  =  [11,23,33,18,72]; 
deck3[15]  =  [14,4,35,56,41]; 
deck3[16]  =  [54,38,70,18,25,24,5]; 
deck3[17]  =  [63,13,24,11,69,23,34]; 
deck3[18]  =  [32,33,68,42,38,29,40]; 
deck3[19]  =  [70,27,75,59,23]; 
deck3  [20]  =  [8,6,25,62,52,1,71]; 
deck3[21  ]  =  [5,9,13,43,36]; 
deck3  [22]  =  [72,18,11,33,23]; 
deck3  [23]  =  [56,27,70,48,72]; 
deck3  [24]  =  [37,46,50,5,55,52,54]; 
decks  [25]  =  [11,33,44,14,5]; 
deck3  [26]  =  [62,7,67,11,20,58,71]; 
deck3  [27]  =  [46,31,14,27,45]; 
decks  [28]  =  [50,55,5,52,46,37,54]; 
deck3  [29]  =  [59,27,70,75,23]; 
deck3[30]  =  [39,75,12,59,64,36,17]; 
deck3[31  ]  =  [19,42,31,9,54]; 
deck3  [32]  =  [27,45,14,46,31]; 
deck3[33]  =  [24,23,11,69,13,34,63]; 
deck3  [34]  =  [53,46,15,59,17]; 
deck3[35]  =  [64,59,39,75,12,36,17]; 
decks  [36]  =  [73,25,16,71,49]; 
decks  [37]  =  [14,11,44,5,33]; 
decks  [38]  =  [19,42,9,54,31]; 
decks  [39]  =  [28,51,14,30,36,66,2]; 
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deck4[0]  =  [9,22,3,17,4,13,50]; 
deck4[l]  =  [45,22,60,53,39]; 
deck4[2]  =  [73,17,7,2,67]; 
deck4[3]  =  [21,50,46,1,5,14,33]; 
deck4[4]  =  [74,59,23,70,58]; 
deck4[5]  =  [29,59,34,31,37]; 
deck4[6]  =  [25,72,44,39,55,17,7]; 
deck4[7]  =  [46,14,50,1,5,33,21]; 
deck4[8]  =  [54,38,24,21,67]; 
deck4[9]  =  [57,30,74,6,21,4,33]; 
deck4[10]  =  [58,74,70,23,59]; 
deck4[l  1  ]  =  [29,31,59,34,37]; 
deck4[12]  =  [73,56,71,37,16]; 
deck4[13]  =  [39,17,72,55,7,44,25]; 
deck4[14]  =  [15,39,55,64,32,49,45]; 
deck4[15]  =  [60,53,45,22,39]; 
deck4[16]  =  [33,9,24,58,63,71,1]; 
deck4[17]  =  [65,1,68,26,24,15,47]; 
deck4[18]  =  [74,58,66,75,47]; 
deck4[19]  =  [37,56,71,73,16]; 
deck4[20]  =  [20,27,46,62,3]; 
deck4[21  ]  =  [24,65,68,1,15,47,26]; 
deck4[22]  =  [52,22,41,2,44]; 
deck4[23]  =  [38,42,67,19,11]; 
deck4[24]  =  [64,45,39,55,49,15,32]; 
deck4[25]  =  [73,67,17,2,7]; 
deck4[26]  =  [18,27,31,53,60,13,30]; 
deck4[27]  =  [24,9,63,33,1,58,71]; 
deck4[28]  =  [50,22,13,9,4,17,3]; 
deck4[29]  =  [58,75,66,47,74]; 
deck4[30]  =  [23,15,8,20,60,25,29]; 
deck4[31  ]  =  [38,67,21,54,24]; 
deck4[32]  =  [30,57,4,21,6,33,74]; 
deck4[33]  =  [26,31,37,69,8,48,61]; 
deck4[34]  =  [29,20,23,25,15,60,8]; 
deck4[35]  =  [2,22,41,52,44]; 
deck4[36]  =  [42,19,11,38,67]; 
deck4[37]  =  [8,37,26,69,48,31,61]; 
deck4[38]  =  [18,30,53,13,31,27,60]; 
deck4[39]  =  [27,20,62,3,46]; 

var  decks  =  [deckl,deck2,deck3,deck4]; 


var  deckCount  =  0; 
var  handCount  =  0; 
var  handSize  =  0; 
var  startTime  =  0; 
var  endTime  =  0; 
var  elapsedTime  =  0; 
var  resultString; 

function  newSession(){ 
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handCount  =  0; 


s  witch(deckCount)  { 
case  0: 
case  1: 
case  2: 
case  3: 

results  [resultslndex++]  =  deckNames[deckCount]; 
document.  getElementByldf session').  setAttribute("disabled",  "true"); 
document. getElementById('scores').removeAttribute("disabled"); 
dealHand(); 
break; 
default: 

document. getElementById('session').setAttribute("disabled", "true"); 
document. getElementById('scores').setAttribute("disabled",  "true"); 
beginResults(); 
break; 

} 

} 


function  printResults(){ 
resultString  =""; 

for(var  i  =  0;  i  <  results. length;  i++) 
resultString  +=  results  [i]  +  "\n"; 

} 


function  beginTest(){ 

document. getElementById('testContainer').removeAttribute("hidden"); 
document.getElementById('submissionContainer').setAttribute("hidden",true); 

} 


function  exitTest(){ 
beginResults(); 

} 


function  editDemo(){ 

document. getElementByldCdemographics'l.removeAttributeC'hidden"); 
document. getElementById('demoBtn,).setAttribute("hidden",true); 

} 


function  beginResults(){ 
printResults(); 

document. getElementById('submissionContainer').removeAttribute("hidden"); 
document. getElementById('results').removeAttribute("hidden"); 
document. getElementById('demographics').setAttribute("hidden"  .true); 
document. getElementByld('testContainer').setAttribute("hidden", true); 
document. getElementById('resultsText').innerHTML  =resultString; 
moveToResults  (); 

} 


function  endSession(){ 
results[resultslndex++]  =  "\n"; 
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<!—  test  code  —  > 

< !  —  beginResults();— > 

<!—  test  code  —  > 

document. getElementById('counter').setAttribute("value","0"); 

document. getElementById('session').removeAttribute("disabled"); 

document. getElementById('session').setAttribute("value",  "Begin  "  +  deckNames[deckCount]  ); 
document. getElementById('scores').setAttribute("disabled",  "true"); 
document. getElementById('titleName').innerHTML  =  deckNames[deckCount]; 

document. getElementById('divr).innerHTML  = 
document. getElementById('div2').innerHTML  = 
document. getElementById('div3').innerHTML  = 
document. getElementById('div4').innerHTML  = 
document. getElementById('div5').innerHTML  = 
document. getElementById('div6').innerHTML  = 
document. getElementById('div7').innerHTML  = 
document. getElementById('div8').innerHTML  = 
document. getElementById('div9').innerHTML  = 
document. getElementById('divlO').innerHTML  = 
document.  getElementByldfdivl  l').innerHTML  = 
document. getElementById('divl2').innerHTML  = 
document. getElementById('divl3').innerHTML  = 
document. getElementById('divl4').innerHTML  = 

} 


function  nextHand(){ 
endTime  =  new  Date(); 

elapsedTime  =  Math.round((endTime.getTime()  -  startTime.getTime())/1000); 
<!—  console. log(elapsedTime);  —  > 

if  (document.getElementByIdf'divr).hasChildNodes()  II 
document. getElementById('div2').hasChildNodes()  II 
document. getElementById('div3').hasChildNodes()  II 
document. getElementById('div4').hasChildNodes()  II 
document. getElementById('div5').hasChildNodes()  II 
document. getElementByldCdivb^.hasChildNodesO  II 
document. getElementById('div7').hasChildNodes()){ 
window. alert("Please  rank  order  all  cards  before  proceeding."); 

} 

else{ 

g  atherRankedS  e  que  nc  e() ; 
dealHand(); 

} 

} 


function  resetHand(){ 
handCount— ; 
resultslndex— ; 
dealHandQ; 

} 


function  gatherRankedSequence()  { 
var  sequenceStr  =  "Ranked  Card  Set :  "; 
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sequenceStr  +=  document. getElementById(,div8').firstChild.getAttribute("id").substring(4)  +  ""  + 
document. getElementByIdCdiv9').firstChild.getAttribute("id").substring(4)  +  "  "  + 
document. getElementById(,divlO,).firstChild.getAttribute("id").substring(4)  +  "  "  + 
document. getElementByldCdivl  r).firstChild.getAttribute("id").substring(4)  +  "  "  + 
document.getElementById('divl2').firstChild.getAttribute("id").substring(4)  +  " 

if(handSize  ==  7){ 

sequenceStr  +=  document. getElementById('divl3').firstChild.getAttribute("id").substring(4)  +  ""  + 
document. getElementById(’divl4').firstChild.getAttribute("id").substring(4)  +  " 

} 

sequenceStr  +=  "number  of  sec  "  +  elapsedTime; 

results[resultslndex++]  =  sequenceStr; 


function  gatherOriginalSequence()  { 

var  sequenceStr  =  "Original  Card  Set : 

sequenceStr  +=  document. getElementByldCdivl'). firstChild.getAttribute("id").substring(4)  +  ""  + 
document. getElementByIdCdiv2').firstChild.getAttribute("id").substring(4)  +  "  "  + 
document. getElementByIdCdiv3').firstChild.getAttribute("id").substring(4)  +  "  "  + 
document. getElementById('div4').firstChild.getAttribute("id").substring(4)  +  "  "  + 
document. getElementById('div5').firstChild.getAttribute("id").substring(4); 

iffhandSize  ==  7){ 

sequenceStr  +=  "  "  +  document.getElementByIdf'div6').firstChild.getAttribute("id").substring(4)  + 
"  "  +  document. getElementById('div7’).firstChild.getAttribute("id").substring(4); 

} 

results[resultslndex++]  =  sequenceStr; 

} 


function  dealHand(){ 

iffhandCount  >=  decks  [dec  kCount].  length)  { 
deckCount++; 
endSession(); 

} 

else{ 
var  hand; 

switch(deckCount)  { 
case  0: 

hand  =  deckl[handCount]; 
break; 
case  1: 

hand  =  deck2[handCount]; 
break; 
case  2: 

hand  =  deck3  [handCount] ; 
break; 
case  3: 

hand  =  deck4  [handCount]; 
break; 
default: 
break; 
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handSize  =  hand. length; 


if(handSize  ==  7){ 

document. getElementById('divr).innerHTML  =  "<img  id=\"card"  +  hand[0]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[0]  +  ",png\">"; 

document. getElementById('div2').innerHTML  =  "<img  id=\"card"  +  hand[l]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[l]  +  ",png\">"; 

document. getElementById('div3').innerHTML  =  "<img  id=\"card"  +  hand[2]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[2]  +  ",png\">"; 

document. getElementById(’div4').innerHTML  =  "<img  id=\"card"  +  hand[3]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[3]  +  ".png\">"; 

document. getElementById(’div5').innerHTML  =  "<img  id=\"card"  +  hand[4]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[4]  +  ".png\">"; 

document. getElementById(’div6').innerHTML  =  "<img  id=\"card"  +  hand[5]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[5]  +  ".png\">"; 

document. getElementById(’div7').innerHTML  =  "<img  id=\"card"  +  hand[6]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[6]  +  ".png\">"; 

document. getElementById(’div6').removeAttribute("hidden"); 
document. getElementById(’div7').removeAttribute("hidden"); 
document. getElementById('label5').innerHTML  =  "5th  Lowest"; 
document. getElementById('label6').removeAttribute("hidden"); 
document. getElementById('label7').removeAttribute("hidden"); 
document. getElementById(’div8').innerHTML  =  ""; 
document. getElementById(’div9’).innerHTML  =  ""; 
document. getElementById('divlO').innerHTML  = 
document. getElementById('divl  r).innerHTML  =  ""; 
document. getElementById('divl2').innerHTML  =  ""; 
document. getElementById('divl3').innerHTML  =  ""; 
document. getElementById('divl4').innerHTML  =  ""; 
document  .getElementB  yld('di v  1 3 ')  .remove  Attribute!  "hidden" ) ; 
document. getElementById('divl4').removeAttribute("hidden"); 

} 

else{ 

document. getElementById(’divr).innerHTML  =  "<img  id=\"card"  +  hand[0]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[0]  +  ".png\">"; 

document. getElementById(’div2').innerHTML  =  "<img  id=\"card"  +  hand[l]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  handfl]  +  ",png\">"; 

document. getElementById('div3').innerHTML  ="<img  id=\"card"  +  hand[2]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[2]  +  ".png\">"; 

document. getElementById('div4').innerHTML  =  "<img  id=\"card"  +  hand[3]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[3]  +  ".png\">"; 

document. getElementById(’div5').innerHTML  =  "<img  id=\"card"  +  hand[4]  +  "\"  draggable=\"true\" 
ondragstart=\"drag(event)\"  src=\"images/card"  +  hand[4]  +  ".png\">"; 
document. getElementById(’div6').innerHTML  =  ""; 
document. getElementById(’div7').innerHTML  =  ""; 
document. getElementById(’div6').setAttribute("hidden",  "true"); 
document. getElementById(’div7').setAttribute("hidden",  "true"); 
document. getElementById('label5').innerHTML  =  "Lowest  Vol"; 
document. getElementById('label6').setAttribute("hidden", "true"); 
document. getElementById('label7').setAttribute("hidden", "true"); 
document. getElementById(’div8').innerHTML  = 
document. getElementById(’div9').innerHTML  =  ""; 
document. getElementById('divlO').innerHTML  = 
document. getElementByldCdivl  r).innerHTML  =  ""; 
document. getElementById('divl2').innerHTML  =  ""; 
document. getElementByldCdivl  3'). setAttribute("hidden", "true"); 
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document. getElementById('divl4').setAttribute("hidden", "true"); 

} 

gatherOriginalSequence(); 

handCount++; 

document. getElementById('counter').setAttribute("value",handCount); 
startTime  =  new  Date(); 

} 


function  allowDrop(ev){ 
ev.preventDefault(); 

} 


function  drag(ev){ 

ev.dataTransfer.setData("Text",ev.target.id); 

} 


function  drop(ev){ 
ev.preventDefault(); 

var  data=ev.dataTransfer.getData("Text"); 

if(ev.target.tagName  !=  "IMG"){ 
ev.  target.  appendChild(document.getElementById(data)); 

} 

} 


function  moveToResults  (){window.location.hash="RESULTS";} 


</script> 

</head> 


<body  style="background-color:#FAEBD7"> 

<div  id="testContainer"  hidden  style="margin-left:auto;margin-right:auto;width:1236px;"> 

<a  nanre="TEST"x/a> 

<hl  id="titleName"  style="text-align:center;  color:Red">Training  Session</hl> 

<div  id="givenData"  style="width:362px;float:left;"> 

<hl  style="text-align:center;">Given  Data  Set</hl> 

<div  id="divl"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="div2"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="div3"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="div4"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="div5"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="div6"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="div7"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

</div> 

<div  id="rankedLabels"  style="width:150px;float:left;"> 

<hl  id="labelO"  style="text-align:center;width:155px;  height:86px;  margin:  12px;">  </hl> 

<h3  id="labell"  style="text-align:center;width:150px;  height:86px;  margin:  12px;">Highest  VoI</h3> 
<h3  id="labe!2"  style="text-align:center;width:150px;  height:86px;  margin:  12px;">2nd  Highest</h3> 
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<h3  id="label3"  style="text-align:center;width:150px;  height:86px;  margin:  12px;">3rd  Highest</h3> 

<h3  id="label4"  style="text-align:center;width:150px;  height:86px;  margin:  12px;">4th  Highest</h3> 

<h3  id="label5"  style="text-align:center;width:150px;  height:86px;  margin:  12px;">5th  Highest</h3> 

<h3  id="label6"  style="text-align:center;width:150px;  height:86px;  margin:  12px;">6th  Highest</h3> 

<h3  id="label7"  style="text-align:center;width:150px;  height:86px;  margin:  12px;">Lowest  VoI</h3> 
</div> 

<div  id="rankedData"  style="width:362px;float:left;"> 

<hl  style="text-align:center;">Ranked  Data  Set</hl> 

<div  id="div8"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="div9"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="divlO"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="divll"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="divl2"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="divl3"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

<div  id="divl4"  ondrop="drop(event)"  ondragover="allowDrop(event)"x/div> 

</div> 

<div  id="controls"  style="width:362px;float:left;"> 

<textarea  style="height:  1 15px;  width:  258px;  resize:  none"  readonly>Instructions:  Please  rank  the 
Information  Cards  in  the  Left  Column  into  the  Spaces  in  the  Right  Column  by  dragging  and  dropping  the  Cards 
into  the  appropriate  slot. 

</textarea> 

<P> 

<input  type='button'  id='session'  autocomplete="off  style="height:  75px;  width:  156px"  value='Begin 
Training  Session'  onclick="newSession();"  /> 

</p> 

<P> 

<input  disabled  type='button'  id='scores'  autocomplete="off  style="height:  75px;  width:  156px" 
value='Enter  Scores'  onclick="nextHand();"  /> 

</p> 

<P> 

<input  type='button'  id='reset'  autocomplete="off"  style="height:  75px;  width:  156px"  value='Resef 
onclick="resetHand();"  /> 

</p> 

<P> 

<input  type='button'  id='exit'  autocomplete="off"  style="height:  75px;  width:  156px"  value='Exit' 
onclick="exitTest();"  /> 

</p> 

<P> 

Count:  <input  type='text'  autocomplete="off  id="counter"  style="height:  29px;  width:  69px"  value='0' 
readonly/> 

</p> 

</div> 

</div> 

<div  style="clear:both;margin-left:auto;margin-right:auto;width:720px;"  id="submissionContainer"  > 


<form  id='form'  action='voi_results.php'  method="post"  > 

<div  id='demographics’> 

<h  1  >Denrographics</h  1  > 

<P> 

Name:  <input  type='text'  autocomplete=”off"  style="height:  29px;  width:  200px"  id="name"  name='name' 

/> 
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<script  type="text/javascript"> 

document. getElementById("name").onkeypress  =  function(evt)  { 
evt  =  evt  II  window. event; 
var  charCode  =  evt.keyCode  II  evt. which; 
if  (charCode  ==  13)  { 

if  (evt.preventDefault)  { 
evt.preventDefault(); 

} 

evt.return  Value  =  false; 


</script> 

</p> 

<p> 

MOS:  <input  type='text'  autocomplete="off"  style="height:  29px;  width:  69px"  id="mos"  name='mos'  /> 
<script  type="text/javascript"> 

document. getElementByld("mos").onkeypress  =  function(evt)  { 
evt  =  evt  II  window. event; 
var  charCode  =  evt.keyCode  II  evt. which; 
if  (charCode  ==  13)  { 

if  (evt.preventDefault)  { 
evt.preventDefault(); 

} 

evt.return  Value  =  false; 


</script> 

</p> 

<p> 

Years  of  Service:  <input  type='number'  min="0"  max="40"  step="l"  autocomplete="off"  style="height: 
29px;  width:  69px"  id="yearsOfService"  name='YoS'  /> 

<script  type="text/javascript"> 

document. getElementById("yearsOfService").onkeypress  =  function(evt)  { 
evt  =  evt  II  window. event; 
var  charCode  =  evt.keyCode  II  evt. which; 
if  (charCode  ==  13)  { 

if  (evt.preventDefault)  { 
evt.preventDefault(); 

} 

evt.return  Value  =  false; 


</script> 

</p> 

<P> 

Number  of  Deployments:  <input  type='number'  min="0"  max="20"  step="l"  autocomplete="off 
style="height:  29px;  width:  69px"  id="numberOfDeployments"  name='NoD’  /> 

<script  type="text/javascript"> 

document. getElementById("numberOfDeployments").onkeypress  =  function(evt)  { 
evt  =  evt  II  window. event; 
var  charCode  =  evt.keyCode  II  evt. which; 
if  (charCode  ==  13)  { 
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if  (evt.preventDefault)  { 
evt.preventDefault(); 

} 

evt.return  Value  =  false; 


</script> 

</p> 

<P> 

Email;  <input  type='email'  autocomplete="off"  style="height:  29px;  width:  200px"  id="email" 
name= 'email'  /> 

<script  type="text/javascript"> 

document. getElementById("email").onkeypress  =  function! evt)  { 
evt  =  evt  II  window. event; 
var  charCode  =  evt.keyCode  II  evt. which; 
if  (charCode  ==  13)  { 

if  (evt.preventDefault)  { 
evt.preventDefault(); 

} 

evt.return  Value  =  false; 


</script> 

</p> 

<P> 

<input  type='button'  id='demoBtn'  autocomplete="off"  style="height:  75px;  width:  156px"  value='Submit 
Demographics'  onClick="beginTest()"  /> 

</p> 

</div> 

<div  id='results'  hidden='true'> 

<a  name="RESULTS"x/a> 

<hl>Results</hl> 

Data:  <textarea  style="height:  128px;  width:  720px;  resize:  none;vertical-align:text-top;"  form='form' 
id='resultsText'  readonly  name='data'x/textarea> 

<P> 

<input  type='button'  id='editDemoBtn'  autocomplete="off"  style="height:  75px;  width:  156px" 
value='Edit  Demographics'  onClick="editDemo()"  /> 

</p> 

<P> 

<input  type='submit'  id='resultsBtn'  autocomplete="off  style="height:  75px;  width:  156px" 
value='Submit  Results'  /> 

</p> 

</div> 

</form> 

</div> 

</body> 

</html> 


<!DOCTYPE  html  PUBLIC  "-/AV3C//DTD  XHTML  1.1//EN" 
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
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<html  xmlns='http://www. w3.org/1999/xhtml’> 
<HEAD> 

<TITLE>  Vol  Survey  </TITLE> 

</HEAD> 

<BODY  style="background-color:#FAEBD7"> 
<?php 

$  filename  =  "F:\WOI  Results\\".uniqid("voi_"); 
Sfilename  .=  ".txt"; 

Sresult  =  fopen($filename,  "x"); 

if  (!$result)  { 

print("<br>Could  not  create  file."); 
exit; 

} 


fputs($result,"Name:  "); 
fputs($result,  $_POST['name’]); 
fputs($result,PHP_EOL); 
fputs($result,"Email:  "); 
fputs($result,  $_POST['email']); 
fputs($result,  PHP_EOL); 
fputs($result, "MOS :  "); 
fputs($result,  $_POST['mos']); 
fputs($result,  PHP_EOL); 
fputs($result,"Years  of  Service:  "); 
fputs($result,  $_POST['YoS’]); 
fputs($result,  PHP_EOL); 
fputs($result,"Number  of  Deployments:  "); 
fputs($result,  $_POST['NoD’]); 
fputs($result,  PHP_EOL); 
fputs($result, " Date(ZULU) :  ”.Date("r")); 
fputs($result,  PHP_EOL); 
fputs($result,  PHP_EOL); 
fputs($result,  $_POST['data']); 

printP'Thanks  you  for  completing  our  Vol  survey."); 
fclose($result); 

?> 


</BODY> 

</html 
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